<template>
  <div>
    <van-nav-bar title="绑定银行卡" left-arrow @click-left="$router.push('/bindcard')" />
    <div class="idcard">
      <div class="idcardbg" style="position: relative">
        <img v-if="imgSrc" :src="imgSrc || ''" alt="" style="width: 100%; height: 100%" />
        <div style="position: absolute; top: 53px; left: 102px">
          <van-uploader :after-read="afterRead" />
        </div>
      </div>
    </div>
    <div class="monerycard">
      <div class="monerycardbg" style="position: relative">
        <img v-if="imgSrc1" :src="imgSrc1 || ''" alt="" style="width: 100%; height: 100%" />
        <div style="position: absolute; top: 53px; left: 102px">
          <van-uploader :after-read="afterRead1" />
        </div>
      </div>
    </div>
    <div style="text-align: center">
      <van-button type="primary" @click="bindID">确定</van-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { bindDoctorBankCard } from '../../api/wallet'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const doctorId = ref(parseInt(localStorage.getItem('doctorId') as string))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId') as string))
const imgSrc = ref()
const imgSrc1 = ref()
const router = useRouter()

const afterRead = (file:any) => {
  // 此时可以自行将文件上传至服务器
  console.log(file)
  imgSrc.value = file.objectUrl
}
const afterRead1 = (file:any) => {
  // 此时可以自行将文件上传至服务器
  console.log(file)
  imgSrc1.value = file.objectUrl
}
const bindID = async () => {
  console.log(doctorId.value)
  console.log(sessionId.value)

  const res = await bindDoctorBankCard(doctorId.value, sessionId.value, {
    bankCardNumber: '110110110110110110',
    bankName: 'hhh银行',
    bankCardType: 1
  })
  console.log(res)
  if (res.data.status == '0000') {
    ElMessage.success('绑定成功')
    router.push('/bindcard')
  }
}
</script>
<style lang="scss">
.idcard {
  width: 100vw;
  height: 40vh;
  padding: 25px;
  h3 {
    width: 45px;
    border-bottom: 3px solid skyblue;
  }
  .idcardbg {
    margin-top: 10px;
    width: 300px;
    height: 200px;
    background: url('../../images-wd/image/hdpi/id_card_front.png') no-repeat;
    background-size: 100%;
    .idtitle {
      font-size: 14px;
      color: skyblue;
      text-align: center;
      line-height: 200px;
    }
  }
}
.monerycard {
  width: 100vw;
  height: 40vh;
  padding: 25px;
  h3 {
    width: 45px;
    border-bottom: 3px solid skyblue;
  }
  .monerycardbg {
    margin-top: 10px;
    width: 300px;
    height: 200px;
    background: url('../../images-wd/image/hdpi/id_card_back.png') no-repeat;
    background-size: 100%;
    .monerytitle {
      font-size: 14px;
      color: skyblue;
      text-align: center;
      line-height: 200px;
    }
  }
}
.bottitle {
  color: skyblue;
  text-align: center;
  margin-top: 20px;
}
</style>